<template>
    <div class="categorie-box">
        <div class="head-box">
       <van-nav-bar :title="title" 
        left-arrow
        @click-left="goTo"
      
       >
           <!-- 使用插槽可自定图标样式 -->
         
        </van-nav-bar>
        <div class="header" v-if="showBox">
            <div class="head-list">
            <van-tabs type="card" @click="goSub" v-model="active">
               
                
                <van-tab v-for="(item,index) in header" :key="index"  :title="item.title" ></van-tab>
            </van-tabs>
            </div>
            <div class="chooes" >
            <van-cell  @click="showPopup" ><img src="../assets/more.png" alt=""></van-cell>
                <van-popup v-model="show"  position="top" >
                    <div class="eject" @click="showClose()"><div class="cont">筛选</div> <img src="../assets/close.png" alt=""></div>
                    <div class="eje-box" >
                        <div class="ejectlist" v-for="(item,index) in header" :key="index" :class="active==index ?  'aviod'  :''" @click='current(index,item.value)'>{{item.title}}</div>

                    </div>
                    

                </van-popup>
            
            </div>
        </div>
</div>
        <div class="main-box">

        
        <div class="main">
            <div class="main-list" v-for="item in list" :key="item.id">
                <div class="left-cover">
                    <img :src="item.cover" alt="" @click="dianji(item.id)">
                    <div class="duration">{{item.duration|duration}}</div>
                </div>

                <div class="right-mesg">
                    <div class="topic">{{item.title}}</div>
                    <div class="count">播放量 {{item.count.count_view|userNums}} · 喜欢 {{item.count.count_like|userNums }}</div>
                    <div class="userinfo"><div class="touxiang"><img :src="item.author.userinfo.avatar" @click="tiaomessage(item.author.userinfo.id)" alt=""></div> 
                    <div class="names">{{item.author.userinfo.username}}</div></div>
                </div>
            </div>
        </div>
        </div>


    </div>
</template>

<script>

    import Headnav from '../components/Headnav.vue';


    export default {
        name:'Categorie',
        data(){
            return{
                id:'',
                title:'',
                list:'',
                header:'',
               
                value:'',
                showBox:true,
                show:false,
                active: 0,
            }
        },


        created(){
            this.id=this.$route.query.id
           
            this.axios({
                 url:'https://apis.netstart.cn/xpc/articles?category_id='+this.id,
            }).then(restul=>{
                if(restul.status==200){
                    this.showBox=true,
                    this.header = restul.data.data.header.categories[this.$route.query.index].sub;
                    this.header.unshift({
                        title: "全部",
                        value: this.id
                    })
                    this.title = restul.data.data.header.categories[this.$route.query.index].title
                    this.list = restul.data.data.list
                    
                    
            
                
              
                }
            })

            // this.categories();

        },

        filters:{
                // 千/k  万/w
                userNums(num) {
                    return num / 10000 >= 1
                        ? (num / 10000).toFixed(1) + "w"
                        : num / 1000 >= 1
                        ? (num / 1000).toFixed(1) + "k"
                        : num;
                    },
                // 秒-->分
                 duration(s){
                    // const hour = parseInt(s / 3600) < 10 ? '0' + parseInt(s / 3600) : parseInt(s / 3600)
                    const min = parseInt(s % 3600 / 60) < 10 ? '0' + parseInt(s % 3600 / 60) : parseInt(s % 3600 / 60)
                    const sec = parseInt(s % 3600 % 60) < 10 ? '0' + parseInt(s % 3600 % 60) : parseInt(s % 3600 % 60)
                    return     min + ':' +  sec 


                 }   
                 
        },
            
        


        components:{
             Headnav,
        
        },



        methods:{
            
             goTo(){
                this.$router.push({name:'faxian'})
            },


            //点击跳转视频详情页
            dianji(id){
              
                this.$router.push({name:'message',query:{id:id}})
            },
            //跳转用户页面
            tiaomessage(id){
                this.$router.push({name:'author',query:{id:id}})
            },

            goSub(title){
               this.value=this.header[title].value
                this.axios({
                 url:'https://apis.netstart.cn/xpc/articles?category_id='+this.value,
            }).then(restul=>{
                if(restul.status==200){
                    this.showBox=true,
                    this.list = restul.data.data.list
                }
            })
                
            },


            showPopup() {
                this.show = true;
            },

            showClose(){
                this.show=false
            },

            current(index){
            //index返回的是当前下标
            this.active = index;
            
              this.value=this.header[this.active].value
                this.axios({
                 url:'https://apis.netstart.cn/xpc/articles?category_id='+this.value,
            }).then(restul=>{
                if(restul.status==200){
                   
                this.list = restul.data.data.list
                    
                
              
                }
            })


        },

        back(v){
            
            this.$router.go(value);
        }


            

        }

        


    }
</script>

<style lang="less" >

    .categorie-box{

       .head-box{
           
       
        // 标签栏
       .header{
           margin-top: 10px;
            display: flex;
            box-sizing: border-box;
            position: relative;
           
           .head-list{
               width: 100%;
               overflow: hidden;
           }

            .chooes{
               
                .van-cell{
                    

                    padding: 0px 5px;


                   
                    
                }  
                
                .van-popup{



                    .eject{
                        font-size: 13px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        border-bottom: 1px solid rgb(231, 231, 231);
                        width: 100%;
                        height: 40px;

                        .cont{
                            margin-left: 20px;
                        }

                        img{
                            margin-right: 10px;
                            width: 20px;
                            height: 20px;
                        }
                    }
                    
                    .eje-box{
                        
                        display: flex;
                        flex-flow: wrap;
                        align-items: center;
                        padding: 30px 15px;

                        .ejectlist{
                            padding: 5px 15px;
                           
                            border-radius: 5px;
                            margin: 5px;
                            background-color: #ececec;
                            
                        }

                        .aviod{
                            color: red;
                        }


                    }

                   


                        
                    }

                
                

                
            }

            .van-tabs{
                box-sizing: border-box;
            }


            .van-tabs__nav--card{
                border: none;
                
                margin: 0;
                
            }

            .van-tabs__nav--card .van-tab{
                border: none;
                color: rgba(135, 135, 135, 0.444);
                background-color:#f3f3f3 ;
                margin-left:10px;
                height: 28px;
                font-size: 12px;
                border-radius: 5px;
            }

            .van-tabs__nav--card .van-tab.van-tab--active{
                color: red;
                
                
            }

       }
       }

        // 内容
        .main-box{
            height:calc(100vh - 50px);
            overflow: auto;
            position: relative;
        }

        .main{
            
            
            .main-list{
               padding: 20px;
               box-sizing: border-box;
               display: flex;
               justify-content: space-between;
               width: 100%;
                border-bottom: 1px solid bisque;
                
               .left-cover{
                   width: 50%;
                   height: 100px;
                //    background-color: rgb(215, 94, 94);
                   border-radius: 5px;
                   position: relative;


                    .duration{
                        position: absolute;
                        bottom: 5%;
                        right: 5%;
                        color: white;
                    }



                   img{
                       border-radius: 5px;
                       display: block;
                       width: 100%;
                       height: 100%;
                   }

               }

               .right-mesg{
                   display: flex;
                   align-items: center;
                   flex-flow: wrap;
                   width: 45%;
                   height: 100px;

                //    background-color: aquamarine;
                   

                    .topic{
                        
                        
                       width: 100%;
                        font-size: 15px;
                        font-weight: bold;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;


                    }

                    .count{
                         width: 100%;
                        
                        
                        font-size: 12px;
                        color: #c2bebe;
                        
                    }

                    .userinfo{
                         width: 100%;
                           
                         
                        display: flex;
                        align-items: center;
                         
                        .touxiang{
                            margin-right: 5px;
                        }


                        .names{
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 1;
                            overflow: hidden;
                            
                        }

                        img{
                            display: block;
                            width: 15px;
                            height: 15px;
                            border-radius: 50%;
                        }

                    }

               }


            }

        }


        



    }


</style>